<template>
  <div class="counter">
    <h1>当前计数: {{ count }}</h1>

    <el-input v-model.number="inputNumber" placeholder="输入一个数字"></el-input>

    <el-form>
      <el-form-item style="margin-top: 20px">

        <el-button @click="add">增加</el-button>

        <!-- 减少按钮 -->
        <el-button @click="reduce">减少</el-button>

        <el-button @click="shezhi">设置为输入的数字</el-button>

        <!--        重置按钮-->
        <el-button @click="resetForm">重置</el-button>

      </el-form-item>
    </el-form>

  </div>
</template>

<script>
export default {
  data() {
    return {
      count: null,
      inputNumber: null,
    }
  },
  methods: {
    add() {
      this.count++;
    },
    reduce() {
      if (this.count < 1) {
        this.$message.error('不可小于1')
      } else {
        this.count--
      }
    },
    shezhi() {
      const regex = /^[1-9]\d*$/;
      if (!regex.test(this.inputNumber)) {
        this.$message.error('请输入正整数')
      } else {
        this.count = this.inputNumber
      }
    },
    resetForm() {
      this.count = null;
      this.inputNumber = null
    }

  }
}
</script>

<style scoped>
.counter {
  text-align: center;
  margin-top: 20px;
}
</style>
